<script setup>
import HomePanel from './HomePanel.vue'
import { ref } from 'vue'
import { getNewAPI } from '@/apis/home'
const newList = ref([])
const getNewList= async () => {
  const res= await getNewAPI()
  console.log(res);
  newList.value = res.data
  //输出测试
  console.log(res.data)
}
getNewList()
</script>

<template>
  <!-- 父传子传递主标题和副标题 -->
 <HomePanel title="猜你喜欢" subTitle="新鲜出炉 品质靠谱">
  <!-- 使用具名插槽 -->
  <template #main>
    <!-- 下面是插槽主体内容模版 -->
  <ul class="goods-list">
    <li v-for="item in newList" :key="item.id">
      <RouterLink :to="`/goods/${item.id}`">
        <img v-img-lazy="item.picture" alt="">
        <p class="name">{{ item.name }}</p>
        <p class="price">￥{{ item.price }}</p>
      </RouterLink>
    </li>
  </ul>
  </template>
 
 </HomePanel>
 
</template>


<style scoped lang='scss'>
    .goods-list {
      width: 990px;
      display: flex;
      flex-wrap: wrap;
      margin: auto;

      li {
        width: 240px;
        height: 300px;
        margin-right: 10px;
        margin-bottom: 10px;

        &:nth-last-child(-n + 4) {
          margin-bottom: 0;
        }

        &:nth-child(4n) {
          margin-right: 0;
        }
      }
    }
</style>